<template>
  <t-card :bordered='false'>
    <div class='form-step-container'>
      <!-- 简单步骤条 -->
      <t-card :bordered='false'>
        <t-steps :defaultCurrent='1' :current='activeForm' status='process'>
          <t-step-item title='申请提交' :content="'已于 ' + formattedTime +' 进行申请'"></t-step-item>
          <t-step-item title='填写宠物信息'></t-step-item>
          <t-step-item title='录入鼻纹信息' content='预计1-3个工作日内录入完毕'></t-step-item>
          <t-step-item title='完成, 生成专属二维码' content=''></t-step-item>
        </t-steps>
      </t-card>

      <!-- 分步表单1 -->
      <div v-show='activeForm === 0' class='rule-tips'>
        <t-alert theme='info' :close='true'>
          <template #title>
            <p style='font-size: 18px'>宠物认证规则：</p>
          </template>
          <div slot='message'>
            <p class='span-txt'>
              本规则适用于所有在社区内饲养的宠物，包括但不限于狗、猫、鸟、鱼等。
            </p>
            <p class='span-txt'>
              如非流浪动物, 申请者需确保宠物已完成所有必要的疫苗接种和健康检查。
            </p>
            <p class='span-txt'>
              申请者需遵守社区管理处的相关规定，如宠物活动区域、宠物行为规范等
            </p>
          </div>
        </t-alert>
      </div>
      <t-form
        v-show='activeForm === 0'
        class='step-form'
        :data='formData1'
        :rules='rules'
        labelAlign='right'
        @submit='onSubmit1'
      >
        <t-form-item label='认证类别' name='name'>
          <t-select :style="{ width: '390px' }" v-model='formData1.name' class='demo-select-base' clearable>
            <t-option v-for='(item, index) in nameOptions' :value='item.value' :label='item.label' :key='index'>
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label='认证类型' name='type'>
          <t-select :style="{ width: '390px' }" v-model='formData1.type' class='demo-select-base' clearable>
            <t-option v-for='(item, index) in typeOptions' :value='item.value' :label='item.label' :key='index'>
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item class='amount-label' label='认证编号'>{{ amount }}BL{{ amount }}3K</t-form-item>
        <t-form-item>
          <t-button theme='primary' type='submit'>提交申请</t-button>
        </t-form-item>
      </t-form>

      <!-- 分步表单2 -->
      <t-form
        v-show='activeForm === 1'
        class='step-form'
        :data='formData2'
        :rules='rules'
        labelAlign='right'
        @reset='onReset2'
        @submit='onSubmit2'
      >
        <t-form-item label='宠物姓名' name='title'>
          <t-input :style="{ width: '480px' }" v-model='formData2.title' placeholder='请输入宠物姓名'></t-input>
        </t-form-item>
        <t-form-item label='宠物出生日期' name='signDate'>
          <t-date-picker
            v-model='formData2.signDate'
            :style="{ width: '322px' }"
            theme='primary'
            mode='date'
            separator='/'
          />
        </t-form-item>

        <t-form-item label='宠物类型' name='type'>
          <t-select
            v-model='formData2.type'
            :style="{ width: '322px' }"
            placeholder='请选择类型'
            class='demo-select-base'
            clearable
          >
            <t-option :value='0'>已绝育</t-option>
            <t-option :value='1'>未绝育</t-option>
          </t-select>
        </t-form-item>

        <t-form-item label='大型疾病史' name='address'>
          <t-input :style="{ width: '480px' }" v-model='formData2.address' placeholder='请输入宠物大型疾病史'></t-input>
        </t-form-item>
        <t-form-item label='年龄' name='bank'>
          <t-input :style="{ width: '480px' }" v-model='formData2.bank' placeholder='请输入宠物年龄'></t-input>
        </t-form-item>
        <t-form-item label='犬种' name='bankAccount'>
          <t-input :style="{ width: '480px' }" v-model='formData2.bankAccount' placeholder='请输入犬种'></t-input>
        </t-form-item>
        <t-form-item label='宠物图片' name='bankAccount'>
          <t-upload
            :before-upload='beforeUpload'
            action='https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo'
          />
        </t-form-item>
        <t-form-item label='通知邮箱' name='email'>
          <t-input :style="{ width: '480px' }" v-model='formData2.email' placeholder='请输入通知邮箱'></t-input>
        </t-form-item>
        <t-form-item label='通知手机' name='tel'>
          <t-input :style="{ width: '480px' }" v-model='formData2.tel' placeholder='请输入通知手机'></t-input>
        </t-form-item>
        <t-form-item>
          <t-button type='reset' theme='default' variant='base' style='margin-right: 15px;'>上一步</t-button>
          <t-button theme='primary' type='submit'>下一步</t-button>
        </t-form-item>
      </t-form>

      <!-- 分步表单3 -->
      <t-form
        v-show='activeForm === 2'
        class='step-form'
        :data='formData3'
        :rules='rules'
        labelAlign='left'
        @reset='onReset3'
        @submit='onSubmit3'
      >
        <!--<t-form-item label="收货人" name="consignee">
          <t-input :style="{ width: '480px' }" v-model="formData3.consignee" placeholder="请输入收货人"></t-input>
        </t-form-item>
        <t-form-item label="手机号码" name="mobileNum">
          <t-input :style="{ width: '480px' }" v-model="formData3.mobileNum" placeholder="请输入手机号码"></t-input>
        </t-form-item>
        <t-form-item label="收货地址" name="deliveryAddress">
          <t-select
            :style="{ width: '480px' }"
            placeholder="请选择收货地址"
            v-model="formData3.deliveryAddress"
            class="demo-select-add"
            clearable
          >
            <t-option v-for="(item, index) in addressOptions" :value="item.value" :label="item.label" :key="index">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="详细地址" name="fullAddress">
          <t-textarea
            :style="{ width: '480px' }"
            v-model="formData3.fullAddress"
            placeholder="请输入详细地址"
          ></t-textarea>
        </t-form-item>-->
        <t-form-item>
          <t-button type='reset' theme='default' variant='base' style='margin-right:15px;'>上一步</t-button>
          <t-button theme='primary' type='submit'>下一步</t-button>
        </t-form-item>
      </t-form>

      <!-- 分步表单4 -->
      <div class='step-form-4' v-show='activeForm === 6'>
        <check-circle-filled-icon style='color: green' size='52px' />
        <p class='text'>完成认证</p>
        <p class='tips'>预计1～3个工作日会将电子二维码发至邮箱，发票邮寄请耐心等待</p>
        <div class='button-group'>
          <t-button @click='onReset4' theme='primary' style='margin-right: 15px;'>再次申请</t-button>
          <t-button @click='onSubmit4' variant='base' theme='default'>查看进度</t-button>
        </div>
      </div>
    </div>
  </t-card>
</template>
<script>
import { CheckCircleFilledIcon } from 'tdesign-icons-vue'
import { prefix } from '@/config/global'


const now = new Date()

const year = now.getFullYear()
const month = ('0' + (now.getMonth() + 1)).slice(-2)
const day = ('0' + now.getDate()).slice(-2)
const hours = ('0' + now.getHours()).slice(-2)
const minutes = ('0' + now.getMinutes()).slice(-2)
const seconds = ('0' + now.getSeconds()).slice(-2)

const formattedTime = year + '年' + month + '月' + day + '日' + hours + ':' + minutes + ':' + seconds


const INITIAL_DATA1 = {
  name: '',
  type: ''
}
const INITIAL_DATA2 = {
  title: '',
  taxNum: '',
  address: '',
  bank: '',
  signDate: null,
  bankAccount: '',
  email: '',
  tel: ''
}
const INITIAL_DATA3 = {
  consignee: '',
  mobileNum: '',
  deliveryAddress: '',
  fullAddress: ''
}

export default {
  name: 'FormStep',
  components: {
    CheckCircleFilledIcon
  },
  data () {
    return {
      formattedTime,
      prefix,
      formData1: {...INITIAL_DATA1},
      formData2: {...INITIAL_DATA2},
      formData3: {...INITIAL_DATA3},
      nameOptions: [
        {label: 'A', value: '1'},
        {label: 'B', value: '2'},
        {label: 'C', value: '3'}
      ],
      typeOptions: [
        {label: 'A', value: '1'},
        {label: 'B', value: '2'},
        {label: 'C', value: '3'}
      ],
      addressOptions: [
        {label: '广东省深圳市南山区', value: '1'},
        {label: '北京市海淀区', value: '2'},
        {label: '上海市徐汇区', value: '3'},
        {label: '四川省成都市高新区', value: '4'},
        {label: '广东省广州市天河区', value: '5'},
        {label: '陕西省西安市高新区', value: '6'}
      ],
      rules: {
        name: [{required: true, message: '请选择', type: 'error'}],
        type: [{required: true, message: '请选择发', type: 'error'}],
        title: [{required: true, message: '请输入', type: 'error'}],
        taxNum: [{required: true, message: '请输入', type: 'error'}],
        consignee: [{required: true, message: '请输入', type: 'error'}],
        mobileNum: [{required: true, message: '请输入', type: 'error'}],
        deliveryAddress: [{required: true, message: '请选择', type: 'error'}],
        fullAddress: [{required: true, message: '请输入', type: 'error'}],
        signDate: [{required: true, message: '请输入', type: 'error'}],
        addres: [{required: true, message: '请输入', type: 'error'}],
        bank: [{required: true, message: '请输入', type: 'error'}],
        tel: [{required: true, message: '请输入', type: 'error'}],
        email: [{required: true, message: '请输入', type: 'error'}],
        bankAccount: [{required: true, message: '请输入', type: 'error'}]
      },
      activeForm: 0
    }
  },
  computed: {
    amount () {
      if (this.formData1.name === '1') {
        return '565421'
      }
      if (this.formData1.name === '2') {
        return '278821'
      }
      if (this.formData1.name === '3') {
        return '109824'
      }
      return 'S8NF489'
    }
  },
  methods: {
    onSubmit1 ({validateResult}) {
      if (validateResult === true) {
        this.activeForm = 1
      }
    },
    onSubmit2 ({validateResult}) {
      if (validateResult === true) {
        this.activeForm = 2
      }
    },
    onReset2 () {
      this.activeForm = 0
    },
    onSubmit3 ({validateResult}) {
      if (validateResult === true) {
        this.activeForm = 6
      }
    },
    onReset3 () {
      this.activeForm = 1
    },
    onSubmit4 () {
      // this.$router.replace({ path: '/detail/advanced' });
      this.$message.success('查看进度成功')
    },
    onReset4 () {
      this.activeForm = 0
    },
    beforeUpload (file) {
      if (!/\.(png)$/.test(file.name)) {
        this.$message.warning('请上传png格式的图片')
        return false
      }
      return true
    }
  }
}
</script>
<style lang='less' scoped>
@import './index';

.span-txt {
  padding: 5px;
  font-size: 15px;
}
</style>
